import { t } from 'i18next'
import { useEffect } from 'react'
import { useRequest } from 'ahooks'
import { fetchSysMsg } from '@/api/manager/helper'
import { useMccStore } from '@/pages/manager/store'
import { Wrap } from './style'
import { HelperTop } from '../../components/HelperTop'
import { ITab } from '../../interface'
import { useMsgStore } from '../../store'
import shallow from 'zustand/shallow'

export const SystemInfo = () => {
	const meetingMoid = useMccStore((state) => state.mccInfo.meetingMoid)

	const { list, update } = useMsgStore(
		(state) => ({
			list: state.systemInfoList,
			update: state.update,
		}),
		shallow
	)

	const { loading, data } = useRequest(() => fetchSysMsg(meetingMoid))

	useEffect(() => {
		if (!loading && data) {
			update({ systemInfoList: data })
		}
	}, [data])

	const handleClickTopTab = (tab: ITab) => {
		update({ tab: undefined })
		setTimeout(() => {
			update({ tab: tab })
		})
	}

	return (
		<Wrap>
			<HelperTop onClickTopTab={handleClickTopTab}>
				{loading
					? ''
					: list.length === 0
					? t('没有找到系统消息')
					: t('为您找到{{num}}条系统消息', { num: list.length })}
			</HelperTop>
			<ul>
				{list.map((x, i) => (
					<li key={`${x.time}-${i}`} title={x.msg}>
						<span>{x.time}</span>
						{x.name !== '' && <span className="info-name">{x.name}</span>}
						<span>{x.msg}</span>
					</li>
				))}
			</ul>
		</Wrap>
	)
}
